<template>
  <div class="menu-buttons">
    <el-button
      v-for="menuItem in conversationMenuItems"
      :key="menuItem.key"
      link
      size="small"
      @click.stop="
        handleMenuClick(menuItem.key as 'delete' | 'edit' | 'share', item)
      "
    >
      <el-icon v-if="menuItem.icon">
        <component :is="menuItem.icon" />
      </el-icon>
      <span v-if="menuItem.label">{{ menuItem.label }}</span>
    </el-button>
  </div>
</template>
<script setup lang="ts">
import { $t } from '@vben/locales';

import { Delete, Edit, Share } from '@element-plus/icons-vue';

import { updateCustomerStar } from '#/api/agent/conversation';

// import { updateCustomerStar } from '#/api/agent/conversation';
import { useAgentChatStore } from '#/store';

const props = defineProps({
  // 客户菜单信息
  item: {
    type: Object,
    default: () => {},
  },
  refresh: {
    type: Function,
    default: () => {},
  },
});

const conversationMenuItems = [
  {
    key: 'edit',
    label: props.item.isStarred
      ? $t('customer.chat.CancelStart')
      : $t('customer.chat.setStart'),
    icon: Edit,
    command: {
      self_id: '1',
      self_message: $t('customer.chat.edit'),
      self_type: 'text',
    },
  },
  {
    key: 'delete',
    label: $t('customer.chat.delete'),
    icon: Delete,
    disabled: true,
    divided: true,
  },
  {
    key: 'share',
    label: $t('customer.chat.share'),
    icon: Share,
    command: 'share',
  },
];

const agentChatStore = useAgentChatStore();

// 处理菜单点击
function handleMenuClick(menuKey: 'delete' | 'edit' | 'share', item: any) {
  switch (menuKey) {
    case 'edit': {
      updateCustomerStar({
        customerId: item.id,
        agentId: agentChatStore?.agentId,
        isStar: !item.isStarred,
      });
      props.refresh(item);
      ElMessage.warning($t('customer.chat.editSuccess'));
      break;
    }
    case 'share': {
      ElMessage.success(`$t('customer.chat.share'): ${item.label}`);
      break;
    }
  }
}
</script>

<style scoped lang="scss">
// 菜单栏样式
.menu-buttons {
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: center;
  padding: 12px;

  // 自定义菜单按钮-el-button样式
  .el-button {
    padding: 4px 8px;
    margin-left: 0;

    .el-icon {
      margin-right: 8px;
    }
  }
}
</style>
